<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <ul class="nav av-tabs" role="tablist" id="myTab">
            <li role="presentation" class="active">
                <a href="#home" aria-controls="home" role="tab" data-toggle="tab">home</a>
            </li>
            <li role="presentation" class="active">
                <a href="#profile" aria-controls="home" role="tab" data-toggle="tab">profile</a>
            </li>
            <li role="presentation" class="active">
                <a href="#message" aria-controls="home" role="tab" data-toggle="tab">message</a>
            </li>
            <li role="presentation" class="active">
                <a href="#settings" aria-controls="home" role="tab" data-toggle="tab">settings</a>
            </li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="home">...</div>
          <div role="tabpanel" class="tab-pane" id="profile">...</div>
          <div role="tabpanel" class="tab-pane" id="messages">...</div>
          <div role="tabpanel" class="tab-pane" id="settings">...</div>
        </div>

       
        
        
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
        
        
        <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框</button>
        
        
        <div id="myAlert" class="alert alert-warning">
           <a href="#" class="close" data-dismiss="alert">&times;</a>
           <strong>警告！</strong>您的网络连接有问题。
        </div>
            
        <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
          Loading state
        </button>
        
        
        
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
          Link with href
        </a>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Button with data-target
        </button>
        
        <div class="collapse" id="collapseExample">
          <div class="well">
            ...
          </div>
        </div>
        
        
        
        
        
        
        
        
         <script>
          $(function () {
            $('#myTab a:last').tab('show')
          })
          
          $(function () {
              $('[data-toggle="tooltip"]').tooltip()
            })
          
          $(function () {
              $('[data-toggle="popover"]').popover();
            })
          
          
          $(function(){
               $(".close").click(function(){
                  $("#myAlert").alert('close');
               });
            });  
           
        $('#myButton').on('click', function () {
//            alert("asdsa");
            
            var $btn = $(this).button('loading');
            console.log($btn);
            // business logic...
//            $btn.button('reset');
          })
          
        </script>
        
        
        
        
        
        
    </body>
</html>